<template>
  <div :class="className" id="main3" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts';

require('echarts/theme/macarons'); // echarts theme

export default {
  props: {
    className: {
      type: String,
      default: 'chart',
    },
    width: {
      type: String,
      default: '100%',
    },
    height: {
      type: String,
      default: '350px',
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
    chartData: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      var chartDom3 = document.getElementById('main3');
      this.chart = echarts.init(chartDom3);
      this.setOptions(this.chartData);
    },
    setOptions({ expectedData, date, name1 } = {}) {
      this.chart.setOption({
        xAxis: {
          data: date,
          boundaryGap: false,
          axisTick: {
            show: true,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: '#7C8CA5',
            },
          },
        },
        grid: {
          left: 10,
          right: 20,
          bottom: 20,
          top: 30,
          containLabel: true,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
          padding: [5, 10],
        },
        yAxis: {
          axisTick: {
            show: false,
          },
          minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。
          axisLine: {
            show: false,
            textStyle: {
              color: '#7C8CA5',
            },
          },
          axisLabel: {
            textStyle: {
              color: '#7C8CA5',
            },
          },
        },
        legend: {
          show: false,
          data: [name1],
          x: 'left', // 'center' | 'left' | {number},
          y: 'center', // 'center' | 'bottom' | {number}
          orient: 'vertical', //垂直显示
        },
        series: [
          {
            name: name1,
            itemStyle: {
              normal: {
                color: '#289DF5',
                lineStyle: {
                  color: '#289DF5',
                  width: 2,
                },
              },
            },
            areaStyle: {
              //折现下方阴影
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#e8f4fd', // 0% 处的颜色
                    },
                    {
                      offset: 0.7,
                      color: '#e8f4fd', // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
              },
            },
            type: 'line',
            data: expectedData,
            animationDuration: 2800,
            animationEasing: 'cubicInOut',
          },
        ],
      });
    },
  },
};
</script>
